<template>
  <div id="home">
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in adList" :key="item.id">
        <van-image :src="item.image"></van-image>
      </van-swipe-item>
    </van-swipe>

    <div id="book">
      <van-cell class="book-div-title" value="查看更多" is-link>
        <template #title>
          <div class="book-div-title_title">
            <van-icon name="column" size="20"/>
            书籍列表
          </div>
        </template>
      </van-cell>
      <van-cell-group>
        <van-list v-model="book.loading" :finished="book.finished" :error.sync="book.error" error-text="加载失败，点击重试"
                  @load="loadBookData">
          <van-cell class="list-item" v-for="item in book.list" :key="item.id">
            <template #title>
              <div style="display: flex">
                <van-image src="http://localhost:8080/static/img/normal.0447fe9.png"
                           @click="bookDetail(item.id)"></van-image>

                <div>
                  <h3>{{ item.b_title }}</h3>
                  <p>
                    <van-tag type="default">作者：{{ item.b_author }}</van-tag>
                  </p>
                  <p>
                    <van-tag type="default">出版社：{{ item.b_publisher }}</van-tag>
                  </p>
                  <p>
                    <van-tag type="default">出版时间：{{ item.b_publisher_time }}</van-tag>
                  </p>
                </div>
              </div>
            </template>
            <!--<template>
              <van-button plain hairline type="info" :loading="false" @click="" size="small">借阅</van-button>
              <van-button plain hairline type="info" :loading="false" @click="" size="small">查看</van-button>
            </template>-->
          </van-cell>
        </van-list>
      </van-cell-group>

      <van-empty v-if="!book.list.length" style="background: #fff;"></van-empty>
    </div>
  </div>
</template>

<script>
import {getBookList, getIndexTopAdList, status} from "../../request/api";

export default {
  name: "Index",
  data() {
    return {
      adList: [],
      book: {
        page: 1,
        list: [],
        loading: false,
        finished: false,
        error: false,
      }
    }
  },
  created() {
    this.getTopAdData();
  },
  methods: {
    async getTopAdData() {
      const res = await getIndexTopAdList();
      if (res.data.code == status.STATUS_SUCCESS) {
        this.adList = res.data.data;
      }
    },
    async loadBookData() {
      try {
        const res = await getBookList({page: this.book.page});
        if (res.data.code == status.STATUS_SUCCESS) {
          this.book.loading = false;
          if (res.data.data.total > 0) {
            res.data.data.current_page == res.data.data.last_page && (this.book.finished = true);
            this.book.list = this.book.list.concat(res.data.data.data);
            this.book.page++;
          } else {
            this.book.list = [];
            this.book.finished = true;
          }
        }
      } catch (e) {
        this.book.loading = false;
        this.book.error = true;
      }
    },
    bookDetail(id) {
      this.$router.push({name: 'BookDetail', params: {id}});
    },
  }
}
</script>

<style scoped>
#home {
  background: #f5f5f5;
}

.my-swipe {
  margin-bottom: 0.5rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

#book p, #book h3 {
  padding: 0;
  margin: 0;
}

#book .book-div-title:after {
  border-bottom: none;
}

#book .book-div-title .book-div-title_title {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: bolder;
}

#book .list-item {
  flex-direction: column;
}

#book .list-item .van-image {
  width: 4.5rem;
  height: 6rem;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
}
</style>
